<template>
  <div class="page" data-page="study" style="overflow: hidden;">
    <div class="link-page-nav">
      <a href="#" class="link" @click=$root.backToTab>
        <i class="iconfont icon-zuo"></i>
      </a>
    </div>
    <div class="link-page-search">
      <div class="historyPoliceApply_title" style="float: left">学习</div>
      <div class="link-page-search-input" style="width: 50%">
        <i class="iconfont icon-APPicon_sousuo1"></i>
        <input type="text" placeholder="搜一搜" id="study_search">
      </div>
      <a class="link" @click=naviToRecord>
        <i class="iconfont icon-APPicon_xuexilishi" style="font-size:24px"></i>
      </a>
      <a class="link" @click=openTags >
        <i class="iconfont icon-APPicon_shaixuan1"  style="font-size:24px;margin-right:10px" id="active"></i>
      </a>
    </div>
    <div data-infinite-distance="50" class="page-content infinite-scroll-content ptr-content pdbottom120"
      @infinite="getMoreMessageList" @ptr:refresh="refreshMessage">
      <div class="ptr-preloader" style="top: -44px;">
        <div class="preloader color-multi"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list no-hairline-bottom  search-list searchbar-found"
        style="padding-top:10px;margin: 10px 20px;">
        <ul id="study-list">
          <li><div>
            <img src="" alt="">
          </div>
          <div>
            <p></p>
          </div>
        </li>
        </ul>
      </div>
      <div id="study_preloader" class="preloader infinite-scroll-preloader"></div>
    </div>
  </div>
</template>

<script>
  return {
    mounted() {
      let self = this;
    },
    data: function () {
      return {
        pageIndex: 0,
        pageSize: 25,
        queryLabel: [],
        studyTags: [],
        allowInfinite: true
      }
    },
    methods: {
      backToRefresh: function () {
        let self = this;
      },
      naviToRecord: function () {
        app.router.navigate("/studyRecord/");
      },
      openTags: function () {
        var self = this;
        loadTags(self.studyTags, self.queryLabel, function () {
          jQuery(".study-popup-tags div").off().on('click', function (e) {
            var hasClass = jQuery(e.target).hasClass('active')
            jQuery('.study-popup-tags').children().removeClass('active')
            if (hasClass) {
              jQuery(e.target).removeClass('active')
              jQuery('#active').removeClass('select-active')
            } else {
              jQuery(e.target).addClass('active')
              jQuery('#active').addClass('select-active')
            }
            var activeLabel = jQuery('.study-popup-tags').children('.active');
            self.queryLabel = [];
            if (activeLabel.length > 0) {
              for (var i = 0; i < activeLabel.length; i++) {
                self.queryLabel.push(jQuery(activeLabel[i]).html());
                self.pageIndex = 0;
              }
            }
            self.getStudyList();
            app.popup.close();
          })
        });
      },
      //下拉刷新
      refreshMessage: function (e, done) {
        var self = this;
        if (done && e) {
          var self = this;
          self.pageIndex = 0;
          var $ = self.$$;
          setTimeout(function () {
            self.getStudyList();
            done();
            $("#study_preloader").hide();
          }, 1000);
        }

      },
      //滚动分页
      getMoreMessageList: function () {
        var self = this;
        var $ = self.$$;
        if (self.allowInfinite) {
          self.allowInfinite = false;
          setTimeout(function () {
            self.pageIndex++;
            self.getStudyList();
          }, 1000);
        }
      },
      //获取列表数据
      getStudyList: function () {
        var self = this;
        Dao.selectLearningMaterialsList({
          queryType: 1,
          pageIndex: self.pageIndex,
          pageSize: self.pageSize,
          queryContent: jQuery("#study_search").val(),
          queryLabel: self.queryLabel.join(','),
          userName: userInfor.accountName,
          orgId: userInfor.organizationIds
        }, function (data, total) {
          if (self.pageIndex == 0) {
            $("#study-list").empty();
          }
          var datalist = data;
          var dealResultHtml = '';
          if (!datalist || datalist.length < 1) {
            jQuery("#study_preloader").hide();
            if (self.pageIndex == 0) { //暂无数据
              jQuery("#study-list").empty();
              jQuery("#study-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
            }
            return;
          }
          self.allowInfinite = true;
          if (datalist.length > 0) {
            if(self.pageIndex == 0 && datalist.length < self.pageSize){
              jQuery("#study_preloader").hide();
            }else{
              jQuery("#study_preloader").show();
            }
            for (var i = 0; i < datalist.length; i++) {
              var m = datalist[i];
              var html = `
                <li id="study_`+ m.id + `" data="` + m.id + `">
                  <a href="#" class="item-link item-content" data-view=".view-main">
                    <div class="decter-pic-con" id="dectorImg_`+m.id+`">
                   
                    </div>
                    <div class="item-inner" style="padding: 0;margin-top:10px;">
                      <div class="item-title-row" style="padding-right: 0;">
                        <div class="item-title decter-name-con">
                          `+ m.title + `
                        </div>
                      </div>
                      <div class="item-subtitle decter-mesage">`+ m.author + `发布于` + moment(m.createTime, 'YYYY-MM-DD HH:mm:ss').format('YYYY年MM月DD日') + `</div>
                    </div>
                  </a>
                </li>
              `;
              jQuery("#study-list").append(html);
              showImage(jQuery("#dectorImg_"+m.id),m.coverUrl|| staticPath + "img/default/emptyStudyImg.png",1);//必须在append 后
              jQuery("#study_" + m.id).off().on('click', { 'data': m.id }, function (e) {
               app.router.navigate("/studyDetail/" + e.data.data + "/");
              });
            }
          }
        });
      },
      //获取标签
      getStutyTags: function () {
        var self = this;
        Dao.getDict({
          userName: userInfor.accountName,
          deviceId: appKeyObj.deviceId,
          code: 77
        }, function (re) {
          var dataBy77 = re.dictValueObj;
          for (var a in dataBy77) {
            var dictValue77 = JSON.parse(dataBy77[a].dictValue);
            var tagType = {
              name: dictValue77.name,
              tags: dictValue77.nodes
            }
            self.studyTags.push(tagType);
          }
        })
      },
    },
    on: {
      pageInit: function (e, page) {
        let self = this;
        let $ = self.$;
        $('#study_preloader').show();
        self.getStutyTags();
        self.getStudyList();

        //搜索
        jQuery("#study_search").keypress(function (e) {
          if (e.which !== 13) {
            return;
          }
          $("#study-list").empty();
          self.pageIndex = 0;
          self.getStudyList();
        });
      },
    }
  }
</script>

<style scoped>
  .historyPoliceApply_title {
    padding-right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
  }

  .select-option {
    padding: 10px 5px;
    background-color: #ffffff;
    font-size: 12px;
    width: 100%;
  }

  .history-type-select {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: white;
  }

  .history-type-select div {
    text-align: center;
    font-size: 14px;
  }

  .imgicon {
    width: 39px;
    height: 39px;
    border-radius: 5px;
    background: #eaeaea;
  }

  #historyPolice_list .decter-no-border,
  #historyPolice_list .decter-yes-border {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
  }

  .item-title span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .click-contaier {
    z-index: 6;
    position: absolute;
    right: 16px;
    top: 18px;
  }

  .maintitle {
    width: 95%;
    padding-left: 5px;
    font-size: 14px;
  }

  .img_bqq {
    /*width: 45px;*/
    padding-top: 1.5px;
    height: 17px;
  }

  .linenumber {
    color: #333333;
    /*padding-top: 5px;*/
    font-size: 15px;
    padding-left: 0px;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    /*-webkit-box-orient: vertical;*/
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
  }

  .icon-size {
    font-size: 22px !important;
  }

  .list ul:before {
    height: 0;
  }

  .media-list li {
    border: 1px solid rgba(225, 225, 225, 0.9);
    box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
    border-radius: 6px;
    margin-bottom: 20px;
  }

  .decter-stuts-con {
    height: 35px;
    font-size: 12px;
    line-height: 35px;
    padding: 0 22px;
    padding-left: 8px;
    border-top: 1px solid rgba(225, 225, 225, 0.51);
  }

  .decter-stuts-con .left {
    float: left;
    color: #397ECE;
    font-size: 14px;
  }

  .item-link.item-content {
    padding-bottom: 10px;
    width: 100%;
  }

  .decter-name-con {
    width: 95%;
    white-space: initial;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    /* height: 40px; */
    line-height: 20px;
    font-weight: bold;
  }

  .decter-mesage {
    font-size: 14px;
    color: #999999;
  }

  .decter-belong-unit {
    font-size: 14px;
    color: #999999;
  }

  .list .item-inner:after {
    height: 0;
  }

  .decter-pic-con {
    background: #e7e7e7;
    border: 1px solid #e1e1e1;
    margin-right: 15px;
    margin-top: 10px;
  }

  .image-item {
    width: 80px;
    height: 80px;
  }
</style>